<template>
  <div class="wrapper">
    <h4 class="title">{{title}}</h4>
    <p class="customer">{{customer}}</p>
    <p class="content">{{content}}</p>
  </div>
</template>

<script>
export default {
  name: 'PageTestimonialPart',
  props: {
    id: {
      required: true,
      type: String
    },
    title: {
      required: true,
      type: String
    },
    customer: {
      required: true,
      type: String
    },
    content: {
      required: true,
      type: String
    }
  }
}
</script>

<style lang="scss" scoped>

  .wrapper{

    font-family: 'Lato', sans-serif;
    font-size: 16px;
    color: #777777;
    margin: 16px 0;

    .title{
      font-weight: 700;
      font-family: 'Roboto Condensed', sans-serif;
      color: #333333;
      line-height: 1.4;
    }

    .customer{
      font-size: 14px;
      line-height: 26px;
      margin-bottom: 25px;
      font-weight: 400;
      margin-top: 8px;
    }

    .content{
      line-height: 26px;
      margin-bottom: 25px;
      font-weight: 400;
    }

  }

</style>
